<template>
	<view class="container">
		<!-- 搜索部分 -->
		<view >
			<uni-search-bar v-model="keyword" radius="100" placeholder="输入文件关键字" cancelButton="none" @confirm="search" @clear="clear"/>
		</view>
		<uni-row>
			<uni-col :span="8">
				<view>
				<uni-data-select
				  v-model="Yvalue"
				  :localdata="Yrange"
				  placeholder="年份"
				  @change="yearchange"
				  :clear="false"
				></uni-data-select>
				</view>
			</uni-col>
			<uni-col :span="8">
				<view>
				<uni-data-select
				  v-model="Mvalue"
				  :localdata="Mrange"
				  placeholder="月份"
				  @change="monthchange"
				  :clear="false"
				></uni-data-select>
				</view>
			</uni-col>
			<uni-col :span="8">
				<view>
				<uni-data-select
				  v-model="Dvalue"
				  :localdata="Drange"
				  placeholder="日期"
				  @change="daychange"
				  :clear="false"
				></uni-data-select>
				</view>
			</uni-col>
		</uni-row>

		<uni-segmented-control :current="currentIndex" :values="items" style-type="text" active-color="#007aff"
			@clickItem="onClickItem" />
		<!-- 文件传阅 -->
		<view v-if="currentIndex === 0">
			<view style="padding: 10px;"></view>
			<view v-for="(item, idx) in list" :key="idx">
				<view class="card" @click="onclickShoucang(idx)" v-if="(item.typ == 17)">
					<view class="card-title">
						<uni-row>
							<uni-col :span="24">
								<view style="font-weight: bold;">
									<view>{{item.title}}</view>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<!-- <view class="card-body">
						<text>
							{{item.content.replace(/<br>/g, '\n')}}<br>
						</text>
					</view> -->
					<view class="card-footer">
						<uni-row>
							<uni-col :span="12">
								<view class="card-footer-left">
									<uni-tag text="文件传阅" size="mini" type="warning" v-if="(item.typ == 17)"></uni-tag>
									<uni-tag text="公文流转" size="mini" type="error" v-if="(item.typ == 18)"></uni-tag>
									<uni-tag text="内部发文" size="mini" type="success" v-if="(item.typ == 23)"></uni-tag>
								</view>
							</uni-col>
							<uni-col :span="12">
								<view class="card-footer-right">{{getFormatedTimeStr(item.createTime)}}</view>
							</uni-col>
						</uni-row>
					</view>

				</view>
				<view style="padding-bottom: 10px;" v-if="(item.typ == 17)"></view>
			</view>
		</view>
		<!-- 公文流转 -->
		<view v-if="currentIndex === 1">
			<view style="padding: 10px;"></view>
			<view v-for="(item, idx) in list" :key="idx">
				<view class="card" @click="onclickShoucang(idx)" v-if="(item.typ == 18)">
					<view class="card-title">
						<uni-row>
							<uni-col :span="24">
								<view style="font-weight: bold;">
									<view>{{item.title}}</view>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<!-- <view class="card-body">
						<text>
							{{item.content.replace(/<br>/g, '\n')}}<br>
						</text>
					</view> -->
					<view class="card-footer">
						<uni-row>
							<uni-col :span="12">
								<view class="card-footer-left">
									<uni-tag text="文件传阅" size="mini" type="warning" v-if="(item.typ == 17)"></uni-tag>
									<uni-tag text="公文流转" size="mini" type="error" v-if="(item.typ == 18)"></uni-tag>
									<uni-tag text="内部发文" size="mini" type="success" v-if="(item.typ == 23)"></uni-tag>
								</view>
							</uni-col>
							<uni-col :span="12">
								<view class="card-footer-right">{{getFormatedTimeStr(item.createTime)}}</view>
							</uni-col>
						</uni-row>
					</view>

				</view>
				<view style="padding-bottom: 10px;" v-if="(item.typ == 18)"></view>
			</view>
		</view>
		<!-- 内部发文 -->
		<view v-if="currentIndex === 2">
			<view style="padding: 10px;"></view>
			<view v-for="(item, idx) in list" :key="idx">
				<view class="card" @click="onclickShoucang(idx)" v-if="(item.typ == 23)">
					<view class="card-title">
						<uni-row>
							<uni-col :span="24">
								<view style="font-weight: bold;">
									<view>{{item.title}}</view>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<!-- <view class="card-body">
						<text>
							{{item.content.replace(/<br>/g, '\n')}}<br>
						</text>
					</view> -->
					<view class="card-footer">
						<uni-row>
							<uni-col :span="12">
								<view class="card-footer-left">
									<uni-tag text="文件传阅" size="mini" type="warning" v-if="(item.typ == 17)"></uni-tag>
									<uni-tag text="公文流转" size="mini" type="error" v-if="(item.typ == 18)"></uni-tag>
									<uni-tag text="内部发文" size="mini" type="success" v-if="(item.typ == 23)"></uni-tag>
								</view>
							</uni-col>
							<uni-col :span="12">
								<view class="card-footer-right">{{getFormatedTimeStr(item.createTime)}}</view>
							</uni-col>
						</uni-row>
					</view>

				</view>
				<view style="padding-bottom: 10px;" v-if="(item.typ == 23)"></view>
			</view>

		</view>

		<uni-load-more :status="moreStatus"></uni-load-more>
	</view>
</template>

<script>
	import {
		websock
	} from '../../net/websock'
	import moment from 'moment'

	export default {
		data() {
			return {
				list: [],
				moreStatus: 'more',
				items: ['文件传阅', '公文流转', '内部发文'],
				currentIndex: 0,
				keyword: '',
				Yvalue:0,
				Yrange:[ ],
				Mvalue:0,
				Mrange:[ { value: 0, text: "全部月份" } ],
				Dvalue:0,
				Drange:[ { value: 0, text: "全部日期" }, ],
			};
		},
		async onReady() {
			this.getOlderShoucang()

			let startYear = 2022
			let endYear = new Date().getFullYear()
			let yearRange = [{value: 0, text: '全部年份'}]
			for (let i = startYear; i <= endYear; i++) {
				yearRange.push({
					value: i,
					text: `${i}年`
				})
			}
			this.Yrange = yearRange			
		},
		// 下拉刷新，获取最新的数据
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			uni.stopPullDownRefresh()
		},
		// 上拉刷新，获取历史数据
		onReachBottom() {
			console.log('onReachBottom')
			this.getOlderShoucang()
		},
		methods: {
			// 切换标签
			onClickItem(e) {
				if (this.currentIndex !== e.currentIndex) {
					this.currentIndex = e.currentIndex
				}
			},
			// 获取最新的通知
			async getNewestShoucang() {
				try {
					// if (this.keyword) {
					// 	this.list = []
					// }

					if (this.list.length == 0) {
						let res = await websock.getGongwenHistoryList({
							pageCount: 30,
							keyword: this.keyword,
							year: this.Yvalue,
							month: this.Mvalue,
							day: this.Dvalue
						})
						uni.stopPullDownRefresh()
						this.list = [...res, ...this.list]
					} else {
						let res = await websock.getGongwenHistoryList({
							greaterThan: this.list[0].id,
							pageCount: 30,
							keyword: this.keyword,
							year: this.Yvalue,
							month: this.Mvalue,
							day: this.Dvalue
						})
						uni.stopPullDownRefresh()
						this.list = [...res, ...this.list]
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			// 获取老的数据
			async getOlderShoucang() {
				this.moreStatus = 'loading'
				try {
					if (this.list.length == 0) {
						let res = await websock.getGongwenHistoryList({
							pageCount: 30,
							keyword: this.keyword,
							year: this.Yvalue,
							month: this.Mvalue,
							day: this.Dvalue
						})
						this.list = [...this.list, ...res]
						if (res.length < 30) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					} else {
						console.log('before get list not empty')
						let res = await websock.getGongwenHistoryList({
							lessThan: this.list[this.list.length - 1].id,
							pageCount: 30,
							keyword: this.keyword,
							year: this.Yvalue,
							month: this.Mvalue,
							day: this.Dvalue
						})
						console.log('getOlderShoucang list not empty', res)
						this.list = [...this.list, ...res]
						if (res.length < 30) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					}
				} catch (e) {
					uni.showToast({
						title: e.message
					})
				}
			},
			getFormatedTimeStr(stamp, str = 'YYYY-MM-DD HH:mm:ss') {
				return moment(stamp).format(str)
			},
			onclickShoucang(idx) {
				if (this.list[idx].typ == 17) {
					uni.navigateTo({
						url: `/pages/task/chuanyueWenjianDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`
					})
				} else if (this.list[idx].typ == 18) {
					uni.navigateTo({
						url: `/pages/task/gongwenLiuzhuanDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`
					})
				} else if (this.list[idx].typ == 23) {
					uni.navigateTo({
						url: `/pages/task/neibuFawenDetail?id=${this.list[idx].relevenceId}&taskid=${this.list[idx].id}`
					})
				}
			},
			search() {
				console.log('search', this.keyword)
				this.list = []
				this.getNewestShoucang()
			},
			clear() {
				console.log('clear', this.keyword)
				this.keyword = ''
				this.list = []
				this.getNewestShoucang()
			},
			yearchange(e) {
			  console.log("year change:", e, this.Yvalue)
			  this.Yvalue = e
			  if (e == 0) {
				this.Mrange = [
					{ value: 0, text: "全部月份" },
				]
				this.Mvalue = 0
				this.Drange = [
					{ value: 0, text: "全部日期" },
			  	]
				this.Dvalue = 0
			  } else {
				this.Mrange = [
					{ value: 0, text: "全部月份" },
					{ value: 1, text: "1月" },
					{ value: 2, text: "2月" },
					{ value: 3, text: "3月" },
					{ value: 4, text: "4月" },
					{ value: 5, text: "5月" },
					{ value: 6, text: "6月" },
					{ value: 7, text: "7月" },
					{ value: 8, text: "8月" },
					{ value: 9, text: "9月" },
					{ value: 10, text: "10月" },
					{ value: 11, text: "11月" },
					{ value: 12, text: "12月" },
			  	]
			  }

			  this.list = []
			  this.getOlderShoucang()
			},
			monthchange(e) {
				console.log('month change:',e)
				this.Mvalue = e
				if (e == 0) {
					this.Drange = [
						{ value: 0, text: "全部日期" },
					]
					this.Dvalue = 0
				} else {
					let year = this.Yvalue
					let month = e
					let days = new Date(year, month, 0).getDate()
					let dayRange = [
						{ value: 0, text: "全部日期" },
					]
					for (let i = 1; i <= days; i++) {
						dayRange.push({
							value: i,
							text: `${i}日`
						})
					}
					this.Drange = dayRange
				}

				this.list = []
			 	this.getOlderShoucang()
			},
			daychange(e) {
				console.log("day change:", e)
				this.Dvalue = e

				this.list = []
			  	this.getOlderShoucang()
			},
		}
	}
</script>

<style>
	@import url("../common/common.css")
</style>
